<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./lib/vue-2.4.0.js"></script>
        <!-- 1.引用vue-router路由模块 -->
        <script src="./lib/vue-router-3.0.1.js"></script>
        <style>
            .router-link-active {
                font-size: 40px;
                color: hotpink;
                margin: 0 25px;
            }
            .myactive{
                font-size: 50px;
                color: green;
            }
            .v-enter,
            .v-leave-to{
                transform: translateX(150px);
                opacity: 0;
            }
            .v-enter-active,
            .v-leave-active{
                transition: all 0.8s ease;
            }
        </style>
    </head>
    <body>
        <div id="app">

            <!-- 如果在路由中，使用 查询字符串，给路由传递参数，
                则 不需要修改 路由规则的 path 属性 -->
            <!-- <router-link to="/login?id=10&name=狗子" tag="button">登陆</router-link>
            <router-link to="/register" tag="button">注册</router-link> -->

             <!-- 直接在path传参 -->
            <router-link to="/login/11/狗子" tag="button">登陆</router-link>
            <router-link to="/register" tag="button">注册</router-link>

            <!-- 这是vue-router提供的专门用来当作占位符的元素 -->
            <router-view></router-view>
            <!-- <transition mode="out-in">
                <router-view></router-view>
            </transition> -->
        </div>
        
        <script>
            const login ={
                // template:'<h1>憨憨---{{$route.query.id}}---{{$route.query.name}}</h1>',
                //直接在path传参
                template:'<h1>憨憨---{{$route.params.id}}---{{$route.params .name}}</h1>',
                created() {
                    console.log(this.$route)
                    // console.log(this.$route.query.id)
                },
            }
            const register ={
                template:'<h1>二丫</h1>'
            }
            const routerObj = new VueRouter({
                routes:[
                    {path:'/login/:id/:name',component:login},
                    {path:'/register',component:register}
                ],
            })
            var vm = new Vue({
                el: '#app',
                data: {

                },
                methods: {
                    
                },
                router: routerObj 
                

            })
        </script>
    </body>
</html>